/*.topic-ctn {*/
/*    height: 100vh;*/
/*    background:*/
/*            50% 0%/contain url("../../res/images/web/topic/huati bg2@2x.png") no-repeat,*/
/*            rgba(248,248,248,1);*/
/*}*/
.topic-tabs {
    background: #fff;
}

.topic-tabs > .am-tabs-tab-bar-wrap {
    width: 50%;
    margin: 0 auto;
}

.topic-tabs > .am-tabs-tab-bar-wrap::before {
    content: '';
    position: absolute;
    top: 43.5px;
    left: 0;
    width: 100%;
    height: 10px;
    /*background: red;*/
    z-index: 9999;
    box-shadow: inset 0px 5px 5px 0px rgba(0,0,0,0.04);
}


.topic-ctn-head {
    height: 136px;
    background: center/cover url("../../res/images/web/topic/huati bg2@2x.png") no-repeat;
    text-align: center;
}

.topic-ctn-head-desc {
    width: 70%;
    text-align: center;
    margin: 14px auto 0;
    font-size:14px;
    font-weight:400;
    color:rgba(255,255,255,1);
    line-height:18px;
}

.topic-top {
    height: 30px;
    background: #F1F1F1;
    position: relative;
}

.topic-top-item {
    width: 95%;
    height:44px;
    background:rgba(255,255,255,1);
    box-shadow: 0 2px 10px 0 rgba(0,0,0,0.04);
    border-radius: 4px;
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
}

.topic-filter {
    width:69px;
    height:22px;
    background:#FFF6E5;
    border-radius:11px;
    text-align: center;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 999;
}

.topic-filter span {
    font-size:12px;
    font-weight:400;
    color:#FF8C00;
    line-height:18px;
}

.topic-list-ctn {
    background: #f8f8f8;
}

.topic-item-ctn {
    /*background: rgba(254,254,254,1);*/
    background: #fff;
    padding: 8px 16px;
    margin-bottom: 1px;
    position: relative;
    /*height: 132px;*/
}
/*.topic-item-ctn:first-child {*/
/*    box-shadow: inset 0px 5px 5px 0px rgba(0,0,0,0.04);*/
/*}*/

.topic-item-head {
    margin-bottom: 12px;
}

.topic-item-title {
    margin-bottom: 2px;
    font-size:16px;
    font-weight:400;
    color:rgba(51,51,51,1);
    line-height:22px;
}

.topic-item-content {
    font-size:14px;
    font-weight:400;
    color:rgba(158,158,158,1);
    line-height:20px;
    max-height: 40px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.topic-img-ctn {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 68px 68px 68px;
    /*grid-template-rows: 68px 68px 68px;*/
    grid-gap: 4px;
}

.add-topic {
    position: absolute;
    bottom: 20px;
    right: 10px;
    z-index: 999;
    background: center/contain url("../../res/images/web/topic/fatie@2x.png");
    height: 64px;
    width: 64px;
    text-align: center;
    box-sizing: border-box;
    padding-top: 38px;
}

.add-topic span {
    font-size:10px;
    font-weight:400;
    color:rgba(255,255,255,1);
    line-height:10px;
}

.fg-icon {
    position: relative;
}

.fg-icon span {
    position: absolute;
    left: 70%;
    transform: translateX(-50%);
    font-size:10px;
    font-weight:600;
    color:rgba(255,255,255,1);
    line-height:20px;
    white-space: nowrap;
}

.topic-item-sp-mark {
    width:22px;
    height:14px;
    background:rgba(250,114,104,1);
    border-radius:2px;
    text-align: center;
    margin-left: 4px;
}

.topic-item-sp-mark span {
    font-size:10px;
    font-weight:600;
    color:rgba(255,255,255,1);
    line-height:14px;
}
